<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"
        />
        <script type="text/javascript" src="/Extjs/bootstrap.js"></script>
        <script type="text/javascript" src="/Extjs/extux.js"></script>
        <link rel="stylesheet" type="text/css" href="/Extjs/resources/css/ext-all.css"
        />
        <link href="/Extjs/ux/grid/css/RangeMenu.css" rel="stylesheet" type="text/css"
        />
        <link href="/Extjs/ux/grid/css/GridFilters.css" rel="stylesheet" type="text/css"
        />
        <link rel="stylesheet" type="text/css" href="/css/main.css" />
        <script type="text/javascript" src="/Extjs/locale/ext-lang-zh_CN.js"></script>
        <script type="text/javascript">
            //<!--
            Ext.Loader.setConfig({
                enabled: true
            });

            Ext.Loader.setPath('Ext.ux', '/Extjs/ux');

            Ext.require([

            'Ext.grid.*',

            'Ext.data.*',

            'Ext.dd.*',

            'Ext.ux.grid.FiltersFeature',

            'Ext.toolbar.Paging'

            ]);

            Ext.onReady(function () {
                var models_store = Ext.create("Ext.data.Store", {
                    "storeId": "models_store",
                    "fields": ["name", "displayname"],
                    "autoLoad": true,
                    "pageSize": 10,
                    "proxy": {
                        "type": "ajax",
                        "url": "\/modeling\/models",
                        "reader": {
                            "type": "json",
                            "root": "source",
                            "totalProperty": "totalCount"
                        }
                    }
                });
                var models_grid = Ext.create("Ext.grid.Panel", {
                    "store": "models_store",
                    "columns": [{
                        "text": "name",
                        flex: 1,
                        "dataIndex": "displayname",
                        "filter": {
                            "type": "string",
                            "dataIndex": "displayname"
                        }
                    }],
                    "dockedItems": [{
                        "xtype": "toolbar",
                        "dock": "top",
                        "items": [{
                            "text": "add",
                            "iconCls": "icon-add",
                            "handler": function () {
                                window.location = '/modeling/add/';
                            }
                        }, {
                            "text": "edit",
                            "iconCls": "icon-edit",
                            "disabled": true,
                            "id": "edit",
                            "handler": function () {
                                var record = models_grid.getSelectionModel().getSelection()[
                                0];
                                window.location = '/modeling/edit/name/' + record.get('name');
                            }
                        }, {
                            "text": "delete",
                            "iconCls": "icon-delete",
                            "disabled": true,
                            "id": "delete",
                            "handler": function () {
                                var record = models_grid.getSelectionModel().getSelection()[
                                0];
                                Ext.MessageBox.confirm('confirm', 'Are you sure to delete?', function (btn) {
                                    if (btn == 'yes') {
                                        Ext.Ajax.request({
                                            url: '/modeling/delete/name/' + record.get('name'),
                                            method: 'POST',
                                            success: function (response, options) {
                                                models_store.load();
                                            },
                                            failure: function (response, options) {
                                                Ext.MessageBox.alert('fail', 'fail to delete:' + response.status);
                                            }
                                        });
                                    } else {
                                        return;
                                    }
                                });
                            }
                        }, {
                            "text": "Run",
                            "iconCls": "icon-run",
                            "disabled": false,
                            "id": "run",
                            "handler": function () {
                                Ext.Ajax.request({
                                    url: '/modeling/run/',
                                    method: 'POST',
                                    success: function (response, options) {
                                        Extux.msg('success', '');
                                    },
                                    failure: function (response, options) {
                                        Extux.msg('failed', '');
                                    }
                                });
                            }
                        }]
                    }],
                    "features": [{
                        "ftype": "filters"
                    }],
                    "listeners": {
                        "itemclick": function () {
                            Ext.getCmp('edit').enable();
                            Ext.getCmp('delete').enable();
                        },
                        "itemdblclick": function () {
                            var record = this.getSelectionModel().getSelection()[
                            0];
                            window.location = '/modeling/edit/name/' + record.get('name');
                        }
                    },
                    "renderTo": "grid"
                });
            });
            //-->
        </script>
    </head>
    
    <body>
        <!---->
        <div id='grid'></div>
    </body>

</html>